<template>
    <el-drawer v-model="show" title="球员详情" size="70vw">
        <el-row>
            <el-col :span="24">
                <el-row>
                    <el-col :span="12">
                          <el-descriptions title="球员信息">
                            <el-descriptions-item label="球员姓名">{{ formData.playerName }}</el-descriptions-item>
                            <el-descriptions-item label="球员性别">{{ formData.sex === 'M' ? '男' : '女' }}</el-descriptions-item>
                            <el-descriptions-item label="身份证号">{{formData.idCard}}</el-descriptions-item>
                            <el-descriptions-item label="身高">{{formData.height}}cm</el-descriptions-item>
                            <el-descriptions-item label="体重">{{formData.weight}}kg</el-descriptions-item>
                            <el-descriptions-item label="年龄">{{formData.age}}</el-descriptions-item>
                            <el-descriptions-item label="生日">{{formData.birth}}</el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                    <el-col :span="12">
                        <div class="image-box">
                            <img class="img" :src="formData.photo" alt="">
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-row>
                <el-col :span="24">
                    <el-descriptions title="积分信息">
                    </el-descriptions>
                    <el-form label-width="auto" v-loading="pointsLoading">
                        <el-form-item label="比赛数">
                            <el-input-number v-model="pointsInfo.matches" placeholder="请输入比赛数" :precision="0" />
                        </el-form-item>
                        <el-form-item label="单打积分">
                            <el-input-number v-model="pointsInfo.singlesPoints" placeholder="请输入单打积分" :precision="1" />
                        </el-form-item>
                        <el-form-item label="双打积分">
                            <el-input-number v-model="pointsInfo.doublesPoints" placeholder="请输入双打积分" :precision="1" />
                        </el-form-item>
                        <el-form-item label="混双积分">
                            <el-input-number v-model="pointsInfo.mixedDoublesPoints" placeholder="请输入混双积分" :precision="1" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="savePoint" :loading="loading">保存积分信息</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-row>
        <template #footer>
            <div class="footer-row">
                <el-button @click="closeDrawer" :loading="loading">关闭</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { usePlayerStore } from '../../../store/player'
import { usePickerStore } from '../../../store/picker'
// import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

const playerStore = usePlayerStore()
const pickerStore = usePickerStore()

const props = defineProps({
  show: Boolean,
  detailData: Object
})
const emit = defineEmits(['update:show', 'close'])

const show = computed<boolean>({
  get: () => props.show,
  set: val => emit('update:show', val)
})
// const formRef = ref<FormInstance>()
// const rules = {
//     areaCode:[
//         { required: true, message: '请选择所属区域', trigger: 'blur' },
//     ],
//     playerCode: [
//         { required: true, message: '请输入球员编码', trigger: 'blur' },
//     ],
//     playerName: [
//         { required: true, message: '请输入球员姓名', trigger: 'blur' },
//     ],
//     sex:[
//         { required: true, message: '请选择球员性别', trigger: 'blur' },
//     ],
//     idCard:[
//         { required: false, message: '请输入身份证号', trigger: 'blur' },
//     ],
//     photo:[
//         { required: true, message: '请上传头像', trigger: 'blur' },
//     ],
// }
const loading = ref<boolean>(false);
const formData = ref<any>({});

const areaList = ref<any>([])
const pointsInfo = ref<any>({
    matches: 0,
    singlesPoints: 0,
    doublesPoints: 0,
    mixedDoublesPoints: 0,
})
const pointsLoading = ref<boolean>(false);
watch(() => props.detailData, () => {
    loading.value = false
    initData()
},{deep: true})
watch(() => show, () => {
    if (!show.value) {
        emit('close')
    }
}, {deep: true})
onMounted(() => {
    getAreaList()
})
function closeDrawer() {
    show.value = false
}
function getAreaList() {
    pickerStore.getAreaList({}).then((res) => {
        if (res.code === 't_200') {
            areaList.value = res.obj
        }
    })
}
function initData() {
    let data = {...props.detailData || {}}
    if (data.id){
        formData.value = {
            areaCode: data.areaCode,
            playerCode: data.playerCode,
            playerName: data.playerName,
            photo: data.photo,
            sex: data.sex,
            idCard: data.idCard,
            birth: data.birth,
            height: data.height,
            weight: data.weight,
            age: data.age,
        }
        getPlayerPointsData()
    }
}
function getPlayerPointsData() {
    let data = {...props.detailData || {}}
    let params = {
        playerId: data.id
    }
    pointsLoading.value = true
    playerStore.getPlayerPoints(params).then((res:any) => {
        if (res.code === 't_200') {
            console.log(res.obj)
            let obj = {...res.obj || {}}
            pointsInfo.value = {
                matches: obj.matches || 0,
                singlesPoints: obj.singlesPoints || 0,
                doublesPoints: obj.doublesPoints || 0,
                mixedDoublesPoints: obj.mixedDoublesPoints || 0,
            }
        }
    }).finally(() => {
        pointsLoading.value = false
    })
}
function savePoint() {
    let data = {...props.detailData || {}}
    let point = {...pointsInfo.value || {}}
    let params = {
        playerId: data.id,
        matches: point.matches,
        singlesPoints: point.singlesPoints,
        doublesPoints: point.doublesPoints,
        mixedDoublesPoints: point.mixedDoublesPoints,
    }
    pointsLoading.value = true
    playerStore.setPlayerPoints(params).then((res:any) => {
        if (res.code === 't_200') {
            ElMessage.success('保存成功！')
        } else {
            ElMessage.error(res.msg)
        }
    }).finally(() => {
        pointsLoading.value = false
    })

}
// function preSave() {
//     formRef.value?.validate((valid) => {
//         if (valid) {
//             doSave()
//         }
//     })
// }

// function doSave() {
//     loading.value = true
//     let detailData = {...props.detailData || {}}
//     let data = {...formData.value}
//     if (data.birth) {
//         data.birth = dayjs(data.birth).format('YYYY-MM-DD')
//     }
//     let params = {
//         id: detailData.id || '',
//         areaCode: data.areaCode,
//         playerCode: data.playerCode,
//         playerName: data.playerName,
//         photo: data.photo,
//         sex: data.sex,
//         idCard: data.idCard,
//         birth: data.birth,
//         height: data.height,
//         weight: data.weight,
//         age: data.age,
//     }
//     playerStore.savePlayer(params).then((res) => {
//         if (res.code === 't_200') {
//             ElMessage.success('保存成功！')
//             closeDrawer()
//         } else {
//             ElMessage.error(res.msg)
//         }
//     }).catch(() => {
//         ElMessage.error("网络异常")
//     }).finally(() => {
//         loading.value = false
//     })
// }
</script>
<style lang="scss" scoped>
.avatar-uploader-icon{
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  text-align: center;
}
.footer-row{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.image-box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .img{
        width: 160px;
        height: 160px;
        border-radius: 6px;
    }
}
</style>
